<template>
  <div class="sr-container" style="margin:2%;">
    <div class="fliter-container" style="margin-bottom:1%;">
      <p style="display:inline-block;">账户：</p>
      <el-input
        v-model="input"
        placeholder="输入手机号"
        size="small"
        style="width:200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <p style="display:inline-block;margin-left:2%">昵称：</p>
      <el-input
        v-model="input"
        placeholder="输入微信昵称"
        size="small"
        style="width:200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <p style="display:inline-block;margin-left:2%">性别：</p>
      <el-select
        size="small"
        placeholder="全部"
        clearable
        class="filter-item"
        style="width: 130px"
        v-model="depValue"
      >
        <el-option v-for="item in deps" :key="item.id" :label="item.name" :value="item.catId" />
      </el-select>
      <p style="display:inline-block;margin-left:2%">地址：</p>
      <el-input
        v-model="input"
        placeholder="输入关键字"
        size="small"
        style="width:200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        size="small"
        style="margin-left:3%;"
        class="filter-item"
        type="success"
        icon="el-icon-search"
        @click="handleFilter"
      >查询</el-button>
    </div>
    <el-table
      :key="tableKey"
      :data="tableData"
      size="small"
      border
      fit
      highlight-current-row
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="序号" min-width="50px" align="center" type="index" />
      <el-table-column align="center" min-width="200px" label="账户">
        <template slot-scope="{row}">
          <span>{{row.account}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="200px" label="姓名">
        <template slot-scope="{row}">
          <span>{{row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="80px" label="性别">
        <template slot-scope="{row}">
          <span>{{row.sex}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="300px" label="地址">
        <template slot-scope="{row}">
          <span>{{row.address}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="150px" label="小康币(元)">
        <template slot-scope="{row}">
          <div v-show="row.isFix" style="disaply:flex;flex-direction:row;align-items:center">
            <el-input v-model="row.money" placeholder="修改小康币"></el-input>
            <el-button
              type="primary"
              @click="handlerEditTitle(row,false)"
              style="margin-top:10px"
            >确定</el-button>
          </div>

          <div v-show="!row.isFix">
            <span>{{row.money}}</span>
            <el-link>
              <i class="el-icon-edit" @click="handlerEditTitle(row,true)"></i>
            </el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="150px" label="注册时间">
        <template slot-scope="{row}">
          <span>{{row.date}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" min-width="120">
        <template slot-scope="{ row }">
          <!-- <el-button size="small" align="center" type="primary" @click="handlerDetailMsg(row)">详细信息</el-button> -->
          <el-button type="success" plain size="small" @click="handleLiaison(row)">详细信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.start"
      :limit.sync="listQuery.length"
      @pagination="tableData"
    />
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="outerVisible"
      title="详情信息"
      width="70%"
    >
      <el-form :model="liaUserList" label-position="left">
        <el-form-item style="float:left; width:50%;padding:0;" label="昵称:">
          <span>{{ liaUserList.nickname }}</span>
        </el-form-item>
        <el-form-item style="float:left;width:50%" label="手机号:">
          <span>{{ liaUserList.phoneNum }}</span>
        </el-form-item>
        <el-form-item label="性别:" style="float:left;width:50%;padding:1;">
          <span>{{ liaUserList.sex == 1 ? "男" : "女" }}</span>
        </el-form-item>
        <el-form-item style="float:left;width:33%" label="注册日期:">
          <span>{{ liaUserList.date }}</span>
        </el-form-item>
        <el-form-item label="地址:" style="float:left;width:50%">
          <span>{{ liaUserList.address }}</span>
        </el-form-item>
        <el-form-item style="float:left;width:50%" label="小康币:">
          <span>{{ liaUserList.money }}</span>
        </el-form-item>
      </el-form>
      <div class="filter-container" style="margin-top:2%;width:100%;float:left">
        <p style="display:inline-block;">小康比使用记录</p>
      </div>
      <el-table
        :key="tableKey"
        :data="tableData"
        size="small"
        border
        fit
        highlight-current-row
        tooltip-effect="dark"
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="序号" align="center" type="index" min-width="50px" />
        <el-table-column label="抵扣时间" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="抵扣金额" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.money }}</span>
            <!-- <el-tag>{{ row.type | typeFilter }}</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column label="抵扣订单号" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.account }}</span>
          </template>
        </el-table-column>

        <el-table-column label="结余小康币" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.money }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { log } from "util";
import Pagination from "@/components/Pagination";
export default {
  components: { Pagination },
  data() {
    return {
      total: 0,
      outerVisible: false,
      input: "",
      depValue: "",
      moneyFix: "",
      // isFix: false,
      total: 120,
      liaUserList: {
        nickname: "昵称",
        sex: 1,
        address: "地址",
        phoneNum: "15230554115858",
        date: "2019.0.0",
        money: "1000"
      },
      listQuery: {
        start: 1,
        length: 10,
        phoneNum: ""
      },
      deps: [
        {
          value: "这是一",
          name: "男",
          id: "11",
          catId: "aa"
        },
        { value: "这是二", name: "女", id: "22", catId: "bb" }
      ],
      tableData: [
        {
          account: "",
          name: "",
          sex: "",
          address: "",
          money: "",
          date: "",
          isFix: false
        },
        {
          account: "",
          name: "",
          sex: "",
          address: "",
          money: "",
          date: "",
          isFix: false
        }
      ],
      listLoading: true,
      tableKey: 0,
      allLlyList: null
    };
  },
  methods: {
    getList() {
      this.listLoading = true;
      var params = {
        pageConvert: true,
        start: this.listQuery.start,
        length: this.listQuery.length
      };
      fetchList(params).then(response => {
        this.list = response.data;
        console.log(this.list);
        this.total = response.recordsTotal;
        console.log(this.total);
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    handleFilter() {},
    handleSelectionChange(val) {
      this.tableData = val;
    },
    handlerDetailMsg(row) {},
    handleLiaison(row) {
      this.outerVisible = true;
    },
    handlerEditTitle(row, isShow) {
      row.isFix = isShow;
    }
  }
};
</script>